<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Floating Action Button</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script src="../../../../../dist/ionic.js"></script>
</head>

<body>
  <ion-app>

    <ion-header translucent>
      <ion-toolbar>
        <ion-title>Floating Action Button</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content id="content" padding fullscreen>
      <f></f>
      <f></f>

      <pre id="log" style="right:10px; bottom:50px; text-shadow: 0 0 2px rgba(0, 0, 0, 0.24);" slot="fixed">log</pre>
      <ion-button>Test</ion-button>
      <ion-fab-button>FAB</ion-fab-button>

      <ion-fab vertical="top" horizontal="end" edge id="fab1" slot="fixed">
        <ion-fab-button onclick="clickMainFAB('fab1')" size="small" class="e2eFabTopRight">
          <ion-icon name="add"></ion-icon>
        </ion-fab-button>
        <ion-fab-list>
          <ion-fab-button onclick="openSocial('facebook', 'fab1')">
            <ion-icon name="logo-facebook"></ion-icon>
          </ion-fab-button>
          <ion-fab-button onclick="openSocial('twitter', 'fab1')">
            <ion-icon name="logo-twitter"></ion-icon>
          </ion-fab-button>
          <ion-fab-button onclick="openSocial('vimeo', 'fab1')">
            <ion-icon name="logo-vimeo"></ion-icon>
          </ion-fab-button>
          <ion-fab-button onclick="openSocial('instagram', 'fab1')">
            <ion-icon name="logo-instagram"></ion-icon>
          </ion-fab-button>
        </ion-fab-list>
      </ion-fab>

      <ion-fab vertical="bottom" horizontal="end" edge id="fab2" slot="fixed">
        <ion-fab-button onclick="clickMainFAB('fab2')" color="dark" class="e2eFabBottomRight">
          <ion-icon name="arrow-dropleft"></ion-icon>
        </ion-fab-button>
        <ion-fab-list side="start">
          <ion-fab-button onclick="openSocial('facebook', 'fab2')">
            <ion-icon name="logo-facebook"></ion-icon>
          </ion-fab-button>
          <ion-fab-button onclick="openSocial('twitter', 'fab2')">
            <ion-icon name="logo-twitter"></ion-icon>
          </ion-fab-button>
          <ion-fab-button onclick="openSocial('vimeo', 'fab2')">
            <ion-icon name="logo-vimeo"></ion-icon>
          </ion-fab-button>
          <ion-fab-button onclick="openSocial('instagram', 'fab2')">
            <ion-icon name="logo-instagram"></ion-icon>
          </ion-fab-button>
        </ion-fab-list>
      </ion-fab>

      <ion-fab vertical="top" horizontal="start" id="fab3" slot="fixed">
        <ion-fab-button onclick="clickMainFAB('fab3')" color="secondary" class="e2eFabTopLeft">
          <ion-icon name="arrow-dropright"></ion-icon>
        </ion-fab-button>
        <ion-fab-list side="end">
          <ion-fab-button onclick="openSocial('facebook', 'fab3')">
            <ion-icon name="logo-facebook"></ion-icon>
          </ion-fab-button>
          <ion-fab-button onclick="openSocial('twitter', 'fab3')">
            <ion-icon name="logo-twitter"></ion-icon>
          </ion-fab-button>
          <ion-fab-button onclick="openSocial('vimeo', 'fab3')">
            <ion-icon name="logo-vimeo"></ion-icon>
          </ion-fab-button>
          <ion-fab-button onclick="openSocial('instagram', 'fab3')">
            <ion-icon name="logo-instagram"></ion-icon>
          </ion-fab-button>
        </ion-fab-list>
      </ion-fab>

      <ion-fab vertical="bottom" horizontal="start" id="fab4" slot="fixed">
        <ion-fab-button onclick="clickMainFAB('fab4')" color="light" class="e2eFabBottomLeft">
          <ion-icon name="arrow-dropup"></ion-icon>
        </ion-fab-button>
        <ion-fab-list side="top">
          <ion-fab-button onclick="openSocial('facebook', 'fab4')">
            <ion-icon name="logo-facebook"></ion-icon>
          </ion-fab-button>
          <ion-fab-button onclick="openSocial('twitter', 'fab4')">
            <ion-icon name="logo-twitter"></ion-icon>
          </ion-fab-button>
          <ion-fab-button onclick="openSocial('vimeo', 'fab4')">
            <ion-icon name="logo-vimeo"></ion-icon>
          </ion-fab-button>
          <ion-fab-button onclick="openSocial('instagram', 'fab4')">
            <ion-icon name="logo-instagram"></ion-icon>
          </ion-fab-button>
        </ion-fab-list>
      </ion-fab>

      <ion-fab vertical="center" horizontal="center" id="fab5" slot="fixed">
        <ion-fab-button onclick="clickMainFAB('fab5')" class="e2eFabCenter">
          <ion-icon name="md-share"></ion-icon>
        </ion-fab-button>
        <ion-fab-list side="top">
          <ion-fab-button onclick="openSocial('vimeo', 'fab5')" color="primary">
            <ion-icon name="logo-vimeo"></ion-icon>
          </ion-fab-button>
        </ion-fab-list>
        <ion-fab-list side="bottom">
          <ion-fab-button onclick="openSocial('facebook', 'fab5')" color="secondary">
            <ion-icon name="logo-facebook"></ion-icon>
          </ion-fab-button>
        </ion-fab-list>
        <ion-fab-list side="start">
          <ion-fab-button onclick="openSocial('instagram', 'fab5')" color="light">
            <ion-icon name="logo-instagram"></ion-icon>
          </ion-fab-button>
        </ion-fab-list>
        <ion-fab-list side="end">
          <ion-fab-button onclick="openSocial('twitter', 'fab5')" color="dark">
            <ion-icon name="logo-twitter"></ion-icon>
          </ion-fab-button>
        </ion-fab-list>
      </ion-fab>

      <ion-fab horizontal="end" vertical="center" slot="fixed">
        <ion-fab-button color="danger" onclick="add()">
          <ion-icon name="add"></ion-icon>
        </ion-fab-button>
      </ion-fab>
    </ion-content>

    <ion-footer>
      <ion-toolbar>
        <ion-buttons slot="secondary">
          <ion-button onclick="closeLists()">Close</ion-button>
        </ion-buttons>
        <ion-title>Footer</ion-title>
      </ion-toolbar>
    </ion-footer>

    <style>
      f {
        display: block;
        margin: 15px auto;
        max-width: 150px;
        height: 150px;
        background: blue;
      }

      f:last-of-type {
        background: yellow;
      }

    </style>

    <script>
      function insertAfter(el, referenceNode) {
        referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling);
      }

      function insertLog(message) {
        console.log(message);
        var el = document.querySelector('#log');
        const oldHTML = el.innerHTML;
        el.innerHTML = oldHTML + '\n' + message;
      }

      function add() {
        var newEle = document.createElement('f');
        var ref = document.querySelector('f');
        insertAfter(newEle, ref);
        insertLog('add');
      }

      function clickMainFAB(container) {
        let message = 'Clicked open social menu';
        insertLog(message);

        toggleLists(container);
      }

      function openSocial(network, container) {
        let message = 'Share in ' + network;
        insertLog(message);

        toggleLists(container);
      }

      function toggleLists(container) {
        var fabButton = document.getElementById(container).querySelector('ion-fab-button');
        var fabLists = document.getElementById(container).querySelectorAll('ion-fab-list');

        fabButton.activated = !fabButton.activated;

        for (var i = 0; i < fabLists.length; i++) {
          fabLists[i].activated = !fabLists[i].activated;
        }
      }

      function closeLists() {
        var fabs = document.querySelectorAll('ion-fab');

        for (var i = 0; i < fabs.length; i++) {
          fabs[i].activated = false;
        }
      }
    </script>
  </ion-app>
</body>

</html>
